import { Button, NavBar, Popup, ProgressBar, Space, Toast } from 'antd-mobile'
import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import styles from './index.module.css'
import axios from '../../api/index'
import { AlipaySquareFill,CheckCircleFill,MailFill } from 'antd-mobile-icons'
function index() {
 const [visible1, setVisible1] = useState(false)
  const [percent, setPercent] = useState(0)
  const timer = setTimeout(() => {
    setPercent(pre => pre + 10)
  }, 100)
  if (percent === 100) {//进度条
    clearTimeout(timer)
  }
  const penple = useSelector(state => state.penple.penple)
  const zf = async () => {//调用接口支付
    setVisible1(false)
    const title = '支付'
    const id = new Date().getTime()
    const res = await axios.get('/api/pay', { params: { id: id, title: title, price: 200 } })
    console.log(res)
    const { code, data, message } = res.data
    if (code === 200) {
      Toast.show('现在打开支付接口')
      window.open(data)
    } else if(res.data.data.length===0) {
      alert('支付未成功，请重新支付')
    }
  }
  return (
    <div>
      <NavBar>支付页面</NavBar>
      {/* 乘车人列表 */}
      <div>
        {
          penple.map((v, i) => (
            <div key={i} className={styles.list}>
              <span>姓名：{v.name}</span>
              <span>手机号：{v.tel}</span><br />
              <span>身份证：{v.code}</span>
            </div>
          ))
        }
      </div>
      {/* 进度条 */}
      <Space direction='vertical' block >
        <ProgressBar percent={percent} />
      </Space>
      <div>
        {
          percent !== 100 ? <div> 现在正在为您占座，请稍候</div> : <div>占座成功，现在可以去支付了</div>
        }
      </div>
      <div>
        <h4>温馨提示</h4>
        <p>1.幅度萨芬大师傅谁的风扇多的对方是否分粉色粉色粉色冯绍峰而是粉色粉色风格的如果</p>
        <p>2.幅度萨芬峰而是粉色粉色风格的如大师傅谁的风扇多的对方是否分粉色粉色粉色冯绍果</p>
        <p>3.幅度萨芬分粉色粉色粉色冯绍峰而是粉色粉大师傅谁的风扇多的对方是否色风格的如果</p>
        <p>4.幅风扇多的对方是否分粉色粉色粉色冯绍峰度萨芬大师傅谁的而是粉色粉色风格的如果</p>
        <p>5.粉色粉色冯绍峰而是粉色粉色风格的如幅度萨芬大师傅谁的风扇多的对方是否分粉色果</p>
      </div>
      {/* 底部按钮 */}
      <div className={styles.footer}>
        {
          percent !== 100 ? <Button block disabled color='danger'>占座中</Button> : <Button block color='success' onClick={() => setVisible1(true)}>支付订单</Button>
        }
      </div>
      {/* 弹窗支付 */}
       <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
      >
          <Button block color='primary' size='large' onClick={()=>zf()}><AlipaySquareFill />支付宝</Button>
          <Button block color='success' size='large'><CheckCircleFill />微信</Button>
          <Button block color='danger' size='large'><MailFill />云闪付</Button>
      </Popup>
    </div>
  )
}

export default index